<template>
  <div class="roleManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          v-has="hasbuttons.uploadbutton"
          icon="el-icon-plus"
          type="primary"
          @click="handleEdit('create')"
        >
          导入证书
        </el-button>
        <el-tooltip
          class="item"
          effect="dark"
          content="启动服务"
          placement="top"
        >
          <el-button
            v-has="hasbuttons.start"
            type="success"
            icon="el-icon-video-play"
            circle
            size="small"
            @click.stop="startService"
          ></el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="dark"
          content="停止服务"
          placement="top"
        >
          <el-button
            v-has="hasbuttons.stop"
            type="danger"
            icon=" el-icon-video-pause"
            circle
            size="small"
            @click.stop="stopService"
          ></el-button>
        </el-tooltip>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryParam" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryParam.permission"
              placeholder="请输入查询条件"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="dataSource"
      :element-loading-text="elementLoadingText"
      border
      @selection-change="setSelectRows"
    >
      <!--<el-table-column show-overflow-tooltip type="selection"></el-table-column>-->
      <el-table-column
        :label="license.licenseName"
        prop="licenseName"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        :label="license.licenseCount"
        prop="licenseCount"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        :label="license.usedLicenseCount"
        prop="usedLicenseCount"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        :label="license.licenseStartTime"
        prop="licenseStartTime"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        :label="license.status"
        prop="status"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" hit>
            {{ scope.row.status === 1 ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        width="400"
        label="操作"
      >
        <template #default="{ row }">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            plain
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            plain
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="ipagination.page"
      :page-size="ipagination.limit"
      :layout="layout"
      :total="ipagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <user-lincense-edit
      ref="edit"
      @fetch-data="submitForm"
    ></user-lincense-edit>
  </div>
</template>

<script>
  import UserLincenseEdit from './components/UserLincenseEdit'
  import { BaseListMixin } from '@/mixins/BaseListMixin'

  const license = {
    licenseName: '许可名称',
    licenseCount: '数量',
    usedLicenseCount: '已用数量',
    licenseStartTime: '有效时间',
    status: '状态',
  }
  const hasbuttons = {
    uploadbutton: 'license:upload',
    start: 'license:startLicense',
    stop: 'license:stopLicense',
  }
  export default {
    name: 'UserLincenseList',
    components: { UserLincenseEdit },
    mixins: [BaseListMixin],
    data() {
      return {
        hasbuttons: hasbuttons,
        license: license,
        url: {
          listPage: '/presoftasim/licensemanage/userlicense/listPage',
          delete: '/presoftasim/system/user/delete',
          create: '/presoftasim/system/user/create',
          update: '/presoftasim/system/user/update',
          upload: '/presoftasim/licensemanage/userlicense/upload',
          startService: '/presoftasim/licensemanage/userlicense/startService',
          stopService: '/presoftasim/licensemanage/userlicense/stopService',
        },
      }
    },
  }
</script>
